<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1{width:300px;height:300px;background: red;overflow: hidden;margin: 50px;}
        .box2{width:200px;height:200px;background: green;overflow: hidden;margin: 50px;}
        .box3{width:100px;height:100px;background: blue;margin: 50px;}
    </style>
</head>
<body>
    
    <div class="box1">
        <div class="box2">
            <div class="box3"></div>
        </div>
    </div>

</body>
<script>

    var box1 = document.querySelector(".box1");
    var box2 = document.querySelector(".box2");
    var box3 = document.querySelector(".box3");

    box1.onclick = function(eve){
        alert("冒泡的red")
    }
    box2.onclick = function(eve){
        alert("冒泡的green")
    }
    box3.onclick = function(eve){
        alert("冒泡的blue")
    }

    document.onclick = function(){
        alert("document")
    }


</script>
</html>